<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>寒衣列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/template.css" media="all">
</head>
<body>


<div class="layui-fluid layadmin-cmdlist-fluid">
    <div th:if="${session.sessionUser == null ? false : session.sessionUser.roleId == 2}" class="layui-row layui-col-space30">
        <form class="layui-form" action="/product/list" method="get">
            <div class="layui-col-lg2">
                <div class="layui-form-item">
                    <label class="layui-form-label">当前批次</label>
                    <div class="layui-input-block">
                        <select name="batchId" id="batch-list">
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-col-lg4">
                <button type="submit" style="margin-left: 30px" class="layui-btn layui-btn-primary" id="query">查询
                </button>
            </div>
        </form>
    </div>
    <div class="layui-row layui-col-space30">
        <div th:if="${page.records.size() == 0}">
            暂无数据
        </div>
        <div class="layui-col-md2 layui-col-sm4" th:each="pro : ${page.records}">
            <div class="cmdlist-container">
                <div class="layui-carousel lunbo-img" th:id="img+${pro.id}">
                    <div carousel-item>
                        <img th:each="img : ${pro.images}" th:src="${img.path}">
                    </div>
                </div>
                <div class="cmdlist-text">
                    <span class="info" th:text="'款式:'+${pro.name}"></span> <br>
                    <span class="info" th:text="'编码:'+${pro.productNumber}"></span>
                    <div class="price">
                        <button th:if="${session.sessionUser == null ? false : session.sessionUser.roleId == 1}"
                                th:proid="${pro.id}" th:batchid="${pro.batchId}" class="layui-btn layui-btn-primary layui-btn-sm pro-check">选择寒衣</button>
                        <button th:proid="${pro.id}" th:batchid="${pro.batchId}" class="layui-btn layui-btn-primary layui-btn-sm">详情</button>
                        <span th:if="${session.sessionUser == null ? false : session.sessionUser.roleId == 2}">
                                <button th:proid="${pro.id}" th:batchid="${pro.batchId}"
                                    class="layui-btn layui-btn-primary layui-btn-sm pro-edit">编辑</button>
                                <button class="layui-btn layui-btn-primary layui-btn-sm">删除</button>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>


<script src="/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index']);
    layui.use(['form', 'laypage', 'layer', 'carousel'], function () {
        var laypage = layui.laypage
            , layer = layui.layer,
            $ = layui.$,
            carousel = layui.carousel,
            form = layui.form
        form.render()
        //获取所有的轮播
        $(".lunbo-img").each(function (index, item) {
            var id = $(this).attr("id")
            carousel.render({
                elem: '#' + id
                , width: '100%' //设置容器宽度
                , arrow: 'hover' //始终显示箭头
                , indicator: 'none' //指示器
            });
        })
        //获取所有批次
        $.ajax({
            type: 'get',
            url: '/batchSetting/list?pageSize=-1',
            success: function (res) {
                $(res.data.records).each(function (index, item) {
                    var $option = $("<option value='" + item.id + "'>" + item.name + "</option>")
                    $("#batch-list").append($option)
                })
                //再js中获取域对象queryBacth的值，有就表示是查询批次
                var queryBacth = [[${queryBacth}]]
                if (queryBacth != null) {
                    $("#batch-list").val(queryBacth)
                } else {
                    //如果存在查询的批次，不用再获取当前批次了
                    $.ajax({
                        type: 'get',
                        url: '/batchSetting/curBatch',
                        success: function (res) {
                            if (res.data == null) {
                                layer.msg("不存在任何批次，请先设置批次")
                                return false
                            }
                            $("#batch-list").val(res.data.id)
                        }
                    })
                }
                form.render('select')
            }
        })
        //修改批次
        $("#query").click(function () {
            var batchId = $("#batch-list").val()

        })
        //选择寒衣按钮
        $(".pro-check").click(function () {
            //验证是否为选衣阶段
            var batchid = $(this).attr("batchid")
            var proid = $(this).attr("proid")
            $.ajax({
                type: 'get',
                url: '/batchSetting/yanzheng?id=' + batchid,
                success: function (res) {
                    if (!res.data) {
                        layer.msg("现在不处于选衣阶段，无法选择寒衣", {icon: 6, time: 1500})
                    } else {
                        //发送请求，查询这个寒衣，跳转编辑页面
                        window.location = '/product/checkById?id=' + proid
                    }
                }
            })
        })
        //编辑按钮
        $(".pro-edit").click(function () {
            //验证是不是选衣段
            var batchid = $(this).attr("batchid")
            var proid = $(this).attr("proid")
            $.ajax({
                type: 'get',
                url: '/batchSetting/yanzheng?id=' + batchid,
                success: function (res) {
                    if (res.data) {
                        layer.msg("现在处于选衣阶段，无法修改寒衣", {icon: 6, time: 1500})
                    } else {
                        //发送请求，查询这个寒衣，跳转编辑页面
                        window.location = '/product/getById?id=' + proid
                    }
                }
            })
        })
    });
</script>
</body>
</html>